<template>
  <div id="ordinaryapply"  class="same-change-oldstyle">
    <div class="">
     <div class="same-head-box" >
        <div class="saem-seat-box" >
          <div class="saem-seat-left">
            <span>当前位置：</span>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                      <el-breadcrumb-item>充值开卡</el-breadcrumb-item>
                    </el-breadcrumb>
          </div>
          <div class="saem-seat-right">
            <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
            <!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
          </div>
        </div>
    </div>
      <div class="carddes">
        <div class="balance" v-if="PartnerQuota.is_self!=2">
          充值账户余额：
          <span class="balspan">{{PartnerQuota.account_recharge_balance|filterNumber}}</span> 元
          <button class="btnb_style" @click="jumpbalance" type="button">充值</button>
        </div>
        <div class="centBox">
          <div class="cent-same-name"><img src="../../../static/images/oC-icon1.png" alt=""> 水卡信息</div>
          <div class="searchitems cardNumBox">
            <div class="same-cont-name">水卡卡号</div>
            <el-input size="medium" v-model="valueShow"  placeholder="请输入水卡卡号" maxlength="16" @input="inputChange"></el-input>
          </div>
          <div class="searchitems" v-show="cardInfo&&valueINput.length>9">
            <div class="same-cont-name"></div>
            <div class="card-msg-box">
              <div class="card-msg-left">
                  <div class="imgbox">
                    <img :src="'../../../static/images/header-img.png'" alt="">
                  </div>
                  <div class="card-user">
                    <span>{{cardInfo.full_name}}</span>
                    <div>{{cardInfo.tel}}</div>
                  </div>
              </div>
              <div class="card-msg-right">
                 <div> 余额：<span>{{cardInfo.balance|filterNumber}}</span>元</div>
                 <div>园区类型：{{cardInfo.village_type}}</div>
                 <div>园区名称：{{cardInfo.village_name}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="centBox scandTwo" v-show="!cardInfo&&valueINput.length>9 || cardInfo&&cardInfo.full_name=='' || cardInfo&&cardInfo.tel=='' || cardInfo&&cardInfo.village_name==''">
        <div class="cent-same-name"><img src="../../../static/images/oC-icon2.png" alt=""> 用户信息 <span>(完善用户信息以便获得更好的售后服务)</span></div>
        <div class="searchitems cardnone">
          <div class="same-cont-name">姓名</div>
          <el-input size="medium" v-model="full_name"  placeholder="请输入姓名" maxlength="16" ></el-input>
        </div>
        <div class="searchitems cardnone">
          <div class="same-cont-name">手机号码</div>
          <el-input size="medium" v-model="tels"  placeholder="请输入手机号码" maxlength="11" ></el-input>
        </div>
        <div class="searchitems cardnone">
          <div class="same-cont-name">园区名称</div>
          <div class="new-el-select-box">
              <el-select v-model="village_name" placeholder="请选择园区名称" @change='chooseVillage' style="width: 380px;">
                <el-option v-for="(item,index) in villageList" :key="item.id" :label="item.village_name" :value="index">
                </el-option>
              </el-select>
          </div>
        </div>
      </div>
    
     <div class="centBox scandTwo">
          <div class="cent-same-name"><img src="../../../static/images/oC-icon3.png" alt=""> 充值模板</div>
          <div class="searchitems">
            <div class="same-cont-name">选择模板</div>
            <div class="new-el-select-box">
                <el-select v-model="template_id" placeholder="请选择" @change='choosedropdown($event)' style="width: 380px;">
                  <el-option v-for="item in templatesList" :key="item.id" :label="item.template_title" :value="item.id">
                  </el-option>
                </el-select>
            </div>
          </div>
          <div class="searchitems">
            <div class="same-cont-name"></div>
            <div class="new-hint-show" v-if="overdue">模板有效期:已过期</div>
            <div class="new-hint-show" v-else>模板有效期:{{time}}</div>
          </div>
      </div>
  
      <div class="centBox scandTwo">
          <div class="cent-same-name"><img src="../../../static/images/oC-icon4.png" alt=""> 套餐</div>
          <div class="searchitems onlyMoney">
            <div class="same-cont-name">充值金额</div>
            <div class="choose-price-box">
                <div v-for="(item,index) in template" :key="index" v-bind:data-index="index" :class="{ 'ac' : index==indexActive}"  class="priceitem" @click="selectprice(index)">
                  <div class="recharge">{{item.recharge}}元</div>
                  <div class="give">实得{{parseFloat(item.recharge) + parseFloat(item.give)}}元</div>
                  <div class="sendsMoney" :class="{'onSend': index==indexActive}">赠送{{item.give}}元</div>
                </div>
                <div class="priceitem newpriceit" @click="openPop">自定义充值金额 </div>
            </div>
          </div>
            <div class="priceinput">
              <span class="centspan">充值金额:
                <span style="color:#FF6565">{{recharge_money}}</span>元
                <span class="givespan">赠送金额:{{give_money}}元</span>
              </span>
            </div>
      </div>
      <div class="centBox " v-if="proList.length>0">
          <div class="cent-same-name"><img src="../../../static/images/oC-icon5.png" alt=""> 选择促销活动</div>
          <div class="searchitems">
            <div class="same-cont-name">促销活动</div>
            <div class="new-chose-box">
                <!-- <div class="chose-one onChose">促销活动1</div>
                <div class="chose-one">促销活动1</div>
                <div class="chose-one">促销活动1</div>
                <div class="chose-one">促销活动1</div> -->
                 <!-- <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                  >全选</el-checkbox> -->
                   <el-checkbox-group v-model="checkedPromotionList" @change="handleCheckedCitiesChange">
                    <el-checkbox
                      border
                      v-for="item in proList"
                      :label="item.id"
                      :key="item.id"
                    >{{item.name}}</el-checkbox>
                  </el-checkbox-group>
            </div>
          </div>
            <!-- <div class="searchitems">
              <div class="same-cont-name"></div>
              <div class="new-chose-box">
                 <el-checkbox-group v-model="checkedPromotionList" @change="handleCheckedCitiesChange">
                    <el-checkbox
                      border
                      v-for="item in proList"
                      :label="item.id"
                      :key="item.id"
                    >{{item.name}}</el-checkbox>
                  </el-checkbox-group>
              </div>
            </div> -->
      </div>
      <div class="shooseBox">
        <el-dialog custom-class="common-custom-dialog" title="自定义充值" :visible.sync="centerDialogVisible" width="30%" top="30vh" center>
           <div class="liter-box" :class="-1==indexActive?'onActive':''" @click="selectprice(-1)">
            <div class="same-lists">
                <div class="lists-name">自定义充值金额:</div>
                <div class="lists-input"> <el-input size="medium" v-model="rechargeMoney" placeholder="请输入充值金额" @input="rechargeInput"></el-input></div>
            </div>
            <div class="same-lists">
                <div class="lists-name">自定义赠送金额:</div>
                <div class="lists-input"> <el-input size="medium" v-model="sendMoney" placeholder="请输入赠送金额" @input="sendInput"></el-input></div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureDiv">确 定</el-button>
          </span>
        </el-dialog>
       
        <!-- <div style="margin-bottom: 20px;margin-left:40px; max-width:55%" v-if="proList.length>0">
          <span class="title">促销项目:</span>
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          >全选</el-checkbox>
          <div style="margin: 5px 0;"></div>
          <el-checkbox-group v-model="checkedPromotionList" @change="handleCheckedCitiesChange">
            <el-checkbox
              border
              v-for="item in proList"
              :label="item.id"
              :key="item.id"
            >{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </div> -->
        <div class="payment">
          <button @click="paymentFun" v-show="isPayment"> {{cardInfo?'去支付':'申请'}}</button>
          <button v-show="!isPayment">{{cardInfo?'去支付':'申请'}}</button>
        </div>
        <!-- <div class="tip_red">备注:选择充值其它金额不享受模板优惠策略</div> -->
      </div>
    </div>
  </div>
</template>

<script >
export default {
  name: "ordinaryapply",
  data: function() {
    return {
      checkAll: false,
      checkedPromotionList: [],
      proList: [],
      isIndeterminate: true,

      valueINput: "", //卡号
      valueShow:'',//卡号四位空格
      PartnerQuota: [],
      cardInfo: '',
      money: "",
      give_money: 0,
      recharge_money: 0,
      template: [], //套餐信息
      template_id: "",
      indexActive: "money_0", //选择套餐
      template_title: "",
      overdue: true,
      start_time: "",
      end_time: "",
      template_type: "",
      isPayment: true, //是否可以支付
      is_input: false, //是否输入充值金额
      promotion: [], //促销项目
      promotion_id: "",
      templatesList: [],//所有充值模板
      rechargeMoney:'',//充值金额
      sendMoney:'',//赠送金额
      centerDialogVisible:false,//'自助充值弹窗'
      villageList:'',//园区列表
      village_name:'',//选中的园区名称
      village_id:'',
      full_name:'',
      tels:'',
      is_self:'',//是否自营
    };
  },
  created: function() {
    this.getPartnerQuota();
     this.remoteMethod();
    // this.getpartnerRecharge();//废弃掉
    this.gettemplateList();
    //this.promotionList();
    //			this.indexActive = 'money_1';
    //			this.recharge_money = this.template[this.indexActive].recharge_money;
    //			this.give_money = this.template[this.indexActive].give_money;
  },
  inject: ['reload'],
	methods: {
		RefreshFun(){
			// 调用reload方法，刷新整个页面
			this.reload()
		},
		//返回
		returnBack(){
			this.$router.back(-1);
    },
    //自定义充值金额
    rechargeInput(e){
      // this.recharge_money=e;
    },
    //input输入
    inputChange(e){
        this.$message.closeAll();
        e.length<=0? this.$message({
          type: "warning",
          showClose: true,
          message: "请输入卡号！",
          center: true
        }):'';
        this.valueINput=e.replace(/\s*/g, "");
        this.valueShow=e.replace(/\s/g, '').replace(/\D/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
        if(this.valueINput.length>=10){
          this.getwaterCardInfo();
        }else{
          this.cardInfo = '';
        }
    },
    //赠送金额
    sendInput(e){
      // this.give_money=e;
    },
    //打开弹窗
    openPop(e){
      this.centerDialogVisible = true;
      if(this.indexActive!=-1){
        this.recharge_money=0;
        this.give_money=0;
        this.indexActive=-1;
      }

    },
    //确认自定义金额
    sureDiv(){
      this.recharge_money=this.rechargeMoney;
      this.give_money=this.sendMoney;
      this.centerDialogVisible = false;
      this.is_input = true;//原来字段
    },
    //获取所有充值模板
    gettemplateList(){
       var that = this;
       this.$post({
        url: "/Partner/Village/templateList",
        data: {
          row: 100,
          template_species: 3 //合伙人的
        },
        success: res => {
          if (res.code == 1000) {
            this.templatesList
            // template_status
            var getoptionData=res.data.data;
            var newdata=[];
            getoptionData.forEach((item,index)=>{
              if(item.template_status==1){//启用值
                  newdata.push(item);
              }
              if(item.is_default==1){
                that.template_id = item.id;
                that.template=item.template;
                that.overdue = item.overdue;
                that.template_type=item.template_type;
                that.start_time = item.start_time;
                that.end_time = item.end_time;
              }
            })
            this.templatesList = newdata;
          }
        }
      });
    },
    chooseVillage(i) {
        this.village_id = this.villageList[i].id;
        this.village_name = this.villageList[i].village_name;
      },
       //搜索园区
      remoteMethod(query) {
        //console.log(query);
        var that = this;
        // Ajax请求
        that.$post({
          url: "Partner/WaterCard/getPartnerVillage",
          data: {
            village_name: query,
            row: 999999,
            page: 1,
            sell_water_status: "",
            template_status: ""
          },
          success: data => {
            //console.log(data);
            if (data.code == 1000) {
              that.villageList = data.data;
            } else {
              that.$message.error(data.message);
            }
          }
        });
      },
    //选择模板
    choosedropdown(e){
      this.template_id=e;
      var gettplateList=this.templatesList;
        gettplateList.forEach((item,index)=>{
          // console.log('每一个的数据',item);
            if(item.id==e){
                this.template=item.template;
                this.template_type=item.template_type;
                this.start_time = item.start_time;
                this.end_time = item.end_time;
                this.overdue = item.overdue;
            }
        })
    },
    getPromotionByVillage(village_id) {
      this.$post({
        url: "/Partner/Promotion/getPromotionListByVillage",
        data: { village_id },
        success: res => {
          if (res.code == 1000) {
            this.proList = res.data;
          }
        }
      });
    },

    handleCheckAllChange(val) {
      this.checkedPromotionList = val ? this.proList : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.proList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.proList.length;
    },

    //判断变量是否存在
    isExitsVariable: function(variableName) {
      try {
        if (
          typeof variableName == "undefined" ||
          variableName == null ||
          variableName == ""
        ) {
          return false;
        } else {
          return true;
        }
      } catch (e) {}
      return false;
    },
    selectprice: function(index) {
      let active = this.indexActive;
      if(index==-1){//自定义充值时 index=-1;
        this.indexActive = index;
        this.recharge_money = 0;
        this.give_money = 0;
        return
      }
      //以下是原来代码的逻辑 不敢动
      if (active == index && index != "money_0") {
        this.indexActive = "money_0";
        this.recharge_money = 0;
        this.give_money = 0;
      } else {
        this.indexActive = index;
        this.recharge_money = parseFloat(this.template[index].recharge);
        this.give_money = parseFloat(this.template[index].give);
      }
      this.money = "";
      this.is_input = false;
    },
    notbalance() {
      this.$confirm("您当前账户余额不足", "请先去充值余额", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.$router.push({ path: "/recharge" });
        })
        .catch(() => {});
    },
    //获取
    jumpbalance: function() {
      this.$router.push({ path: "/recharge" });
    },
    //获取当前合伙人的余额
    getPartnerQuota: function() {
      var that = this;
      that.$post({
        url: "Partner/WaterCard/getPartnerQuota",
        data: {},
        success: data => {
          if (data.code == 1000) {
            that.PartnerQuota = data.data;
          }
        }
      });
    },
    // 搜索
    getwaterCardInfo: function() {
      var that = this;
      if (!that.valueINput) {
        this.$message({
          type: "warning",
          showClose: true,
          message: "请输入卡号！",
          center: true
        });
        return false;
      }
      that.$post({
        url: "Partner/WaterCard/getWaterCard",
        data: { card: that.valueINput },
        success: data => {
          if (data.code == 1000) {
            that.cardInfo = data.data;
            that.full_name= data.data.full_name;
            that.tels= data.data.tel;
            that.village_name= data.data.village_name;
            if (data.data.rq_id > 0) {
              that.getPromotionByVillage(data.data.rq_id);
            }
          } else {
            that.cardInfo = '';
            that.full_name= '';
            that.tels= '';
            that.village_name= '';
           this.$message.closeAll();
            // this.$message({
            //   type: "warning",
            //   showClose: true,
            //   message: data.message,
            //   center: true
            // });
          }
        }
      });
    },

    showMessage(msg) {
      this.$message({
        type: "warning",
        showClose: true,
        message: msg,
        center: true
      });
    },
    // 去支付
    paymentFun: function() {
      console.log("in");
      var that = this;
      var promotion_id = that.promotion_id;
      // if(that.cardInfo==''){
      //     if(that.full_name==''){
      //         that.showMessage('请输入姓名');
      //         return;
      //     }
      //     if(that.village_name==''){
      //       that.showMessage("输入用户姓名");
      //       return;
      //     }
      // }
      // if(Number(promotion_id) <= 0){
      //   promotion_id = '';
      // }
      // console.log(promotion_id);
      // return  false;
      //判断余额是否充足
      //console.log(that.recharge_money)
      //var recharge_money = that.recharge_money.replace(/[^0-9]/ig,"");
      var recharge_money = parseFloat(that.recharge_money);
      var give_money = parseFloat(that.give_money);
      let checkPro = this.checkedPromotionList;
      if (recharge_money < 0 && checkPro.length == 0) {
        that.showMessage("充值金额不能为负数");
        return;
      }
      if (
        Number(recharge_money) >
        Number(that.PartnerQuota.account_recharge_balance)
      ) {
        that.notbalance();
        return false;
      }
      if (!that.valueINput) {
        // alert('请输入卡号！');
        this.$message({
          type: "warning",
          showClose: true,
          message: "请输入卡号！",
          center: true
        });
        return false;
      }
      that.isPayment = false;
      that.$post({
        url: "Partner/WaterCard/waterCardRecharge",
        data: {
          village_name:that.village_name,//选中的园区名称
          village_id:that.village_id,
          full_name:that.full_name,
          tel:that.tels,
          card: that.valueINput,
          money: recharge_money,
          give: give_money,
          template_id: that.is_input ? "" : that.template_id, //默认充值模板没有ID，也不存在赠送问题
          promotion_id: checkPro
        },
        success: data => {
          console.log(data);
          if (data.code == 1000) {
            that.$message({
              type: "success",
              showClose: true,
              message: "充值成功！",
              center: true
            });
               that.getPartnerQuota();
               that.getpartnerRecharge();
               that.getwaterCardInfo();
            //this.$router.push({path:'/rechargemanage'});
          } else {
            that.$message({
              type: "error",
              showClose: true,
              message: data.message,
              center: true
            });
            //this.$router.push({path:'/cardrecharge'});
          }
          that.isPayment = true;
          // that.money = "";
          // that.give_money = 0;
          // that.recharge_money = 0;
          // that.indexActive = "money_0"; //选择套餐
          // that.valueINput = "";
          // that.getPartnerQuota();
          // that.getpartnerRecharge();
          //  that.cardInfo = '';
          //   if (that.proList.length > 0) {
          //     that.checkAll = false;
          //     that.checkedPromotionList = [];
          //     that.proList = [];
          //     that.isIndeterminate = true;
          //   }
        }
      });
    },

    sr: function() {
      this.indexActive = "money_0";
      this.give_money = 0;
      var money = parseFloat(this.money);
      if (money > 0) {
        this.recharge_money = money;
      } else {
        this.recharge_money = 0;
      }
      this.is_input = true;
    },
    //获取套餐信息
    getpartnerRecharge: function() {
      var that = this;
      // Ajax请求
      that.$post({
        url: "Partner/Village/partnerRecharge",
        data: {},
        success: data => {
          //console.log(data);
          if (data.code == 1000) {
            that.template = data.data.template;
            // that.template_title = data.data.template_title;
            that.overdue = data.data.overdue;
            that.start_time = data.data.start_time;
            that.end_time = data.data.end_time;
            that.template_type = data.data.template_type;
            // if (that.isExitsVariable(data.data.id)) {
            //   that.template_id = data.data.id;
            // }
            //console.log(that.list);
          } else {
            that.$message.error(data.message);
          }
        }
      });
    },
    promotionList(page, pageSize) {
      var that = this;
      // Ajax请求
      that.$post({
        url: "Partner/Promotion/getPromotionList",
        data: {
          row: 1000,
          page: 1
        },
        success: data => {
          if (data.code == 1000) {
            that.promotion = data.data.data;
          } else {
            that.$message.error(data.message);
          }
        }
      });
    }
  },
  mounted() {},
  watch: {},
  computed: {
    time: function() {
      if (this.template_type == 1) {
        var time = this.start_time + "至" + this.end_time;
      } else if (this.template_type == 2) {
        var time = "永久有效";
      }
      return time;
    }
  }
};
</script>


<style scoped>
.el-checkbox {
  margin: 5px;
}
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin: 5px;
}
</style>
<style >
#ordinaryapply ::-webkit-input-placeholder {
  color: #b3b3b3;
  font-size: 14px;
}
#ordinaryapply {
  padding-bottom: 30px;
  font-size: 16px;
  background: #fff;
}
#ordinaryapply .carddes {
}
#ordinaryapply .balance {
  padding: 10px 40px;
  background: #FAFAFA;
}
#ordinaryapply .balance .btnb_style {
  border: none;
  width: 70px;
  height: 30px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  background: #275485;
  margin-left: 40px;
  border-radius: 4px;
}
#ordinaryapply .balspan {
  color: #FF6565;
  font-weight: bold;
  font-size: 22px;
}
#ordinaryapply .centBox {
  /* margin-top: 20px; */
  padding: 0px 40px;
  /*background: #f2f3f3;*/
}
#ordinaryapply .centBox .cent-same-name{
 padding:15px 0px;
 width: 100%;
 display: flex;
 justify-content: flex-start;
 align-items: center;
 color: #2C5586;
 font-size: 16px;
 font-weight:500;
}
#ordinaryapply .centBox .cent-same-name span{
  font-size: 12px;
  color: #FF6565;
  padding-left: 5px;  
}
#ordinaryapply .centBox .cent-same-name img{
   width: 17px;
  display: block;
  margin-right: 13px;
}
#ordinaryapply .centBox .searchitems {
  padding-left: 36px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
#ordinaryapply .onlyMoney{
  align-items: flex-start!important;
}
#ordinaryapply  .searchitems .same-cont-name{
  width:70px;
  padding-right: 10px;
  box-sizing: border-box;
  font-size:14px;
  font-weight:400;
  color:rgba(51,51,51,1);
}
#ordinaryapply .searchitems .new-chose-box{
  min-width: 700px;
  display: flex;
}

#ordinaryapply .searchitems .chose-one{
  text-align: center;
  min-width: 200px;
  height: 36px;
  line-height: 36px;
  font-size:18px;
  font-weight:400;
  color:rgba(51,51,51,1);
  background:rgba(255,255,255,1);
  border:1px solid rgba(237,237,237,1);
  border-radius:10px;
  margin-right: 15px;
}

#ordinaryapply .searchitems .onChose{
  color:#FFF;
  background:rgba(44,85,134,1);
  border:1px solid rgba(237,237,237,1);
}
#ordinaryapply .new-hint-show{
  padding-top: 2px;
  font-size:12px;
  font-weight:400;
  color:rgba(45,86,134,1);
}
#ordinaryapply  .card-msg-box{
  width: 380px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:180px;
  background:rgba(250,250,250,1);
  border-radius:10px;
  padding: 10px 0;
  box-sizing: border-box;
  margin-top: 2px;
  box-shadow: 1px 2px 20px 0px rgba(136,159,184,0.3);
}
#ordinaryapply  .card-msg-left{
  width: 126px;
  height: 160px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  border-right: 1px dashed rgba(154,152,152,.5);
}
#ordinaryapply   .card-msg-left .imgbox img{
  width:77px;
  height:77px;
  display: block;
  border-radius:50%;
  border:1px solid rgba(35,174,179,1);
}
#ordinaryapply   .card-msg-left .imgbox{
  display: flex;
  justify-content: center;
  align-items: center;
  width:88px;
  height:88px;
  background:rgba(44,86,134,.1);
  border:1px solid rgba(36,174,180,.1);
  border-radius:50%;
}
#ordinaryapply   .card-msg-left .card-user{  
   text-align: center;
}
#ordinaryapply   .card-msg-left .card-user span{  
  width: 100%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  font-size:16px;
  font-weight:bold;
  color:rgba(45,86,134,1);
}
#ordinaryapply   .card-msg-right{
  width:254px;
  height: 160px;
  padding: 12px 15px;
  box-sizing: border-box;
  font-size:16px;
  font-weight:400;
  color:rgba(76,76,76,1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}
#ordinaryapply   .card-msg-right span{
  color:#FF6666;
  font-weight: 600;
}
.balashow {
  margin-left: 20px;
}
#ordinaryapply .linerow {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

#ordinaryapply .linerow p {
  margin: 0;
  /*width: 80px;*/
}

#ordinaryapply .linerow .adddes {
  font-size: 14px;
  /*margin-left: 20px;*/
}

#ordinaryapply .rowinner {
  display: flex;
  align-items: center;
  margin-right: 80px;
  color: #333433;
}
#ordinaryapply .fonts {
  font-size: 14px;
  color: #313434;
}

#ordinaryapply .rowinner span:last-child {
  /*margin-left: 20px;*/
  font-size: 14px;
}

#ordinaryapply .rowinner span:first-child {
  /*width: 80px;*/
}

#ordinaryapply .centBox .searchitems .el-input__inner {
  width:380px;
  height: 38px;
  border: 1px solid #d3d4d4;
  border-radius: 4px;

}
#ordinaryapply .searchitems .el-input {
  height: 38px;
  border-radius: 4px;
  width: 380px;
  font-size:14px;
  font-weight:500;
  color:rgba(51,51,51,1);
}
#ordinaryapply .cardNumBox .el-input {
  font-size:18px;
} 
#ordinaryapply .centBox .cardnone{
margin-bottom: 20px!important;
}

#ordinaryapply .centBox .searchitems button {
  height: 30px;
  line-height: 30px;
  padding: 0 25px;
  background-color: #2c5586;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  margin-left: 30px;
}
#ordinaryapply .scandTwo{
  margin-top: 20px;
}
#ordinaryapply .shooseBox {
  width: 100%;
  /*background: #f2f3f3;*/
  margin-top: 30px;
}
#ordinaryapply .choose-price-box {
  width: 420px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-weight: bold;
  position: relative;
}

#ordinaryapply .choose-price-box .priceitem {
  width: 120px;
  text-align: center;
  background:rgba(255,255,255,1);
  border:1px solid rgba(238,238,238,1);
  border-radius:10px;
  height: 100px;
  cursor: pointer;
  margin-bottom: 20px;
  border-radius: 8px;
  position: relative;
  margin-right: 18px;
}
#ordinaryapply .newpriceit{
  display: flex;
  justify-content: center;
  align-items: center;
}
#ordinaryapply .choose-price-box .priceitem .recharge {
  font-size:20px;
  font-weight:500;
  width: 100%;
  height: 67px;
  text-align: center;
  line-height: 67px;
  border-bottom:1px dashed rgba(237,237,237,1);
}
#ordinaryapply .choose-price-box .priceitem .give {
  line-height: 32px;
  height: 32px;
  font-size: 14px;
  font-weight:400;
  text-align: left;
  padding: 0px 7px;
}
#ordinaryapply .choose-price-box .priceitem .sendsMoney{
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 2;
  font-size: 12px;
  padding: 3px 5px;
  background:rgba(44,85,134,1);
  border-radius:0px 10px 0px 10px;
  color:#FFFFFF;
  font-weight: 200;
}
#ordinaryapply .choose-price-box .priceitem .onSend{
  background:rgba(255,101,101,1);
}
#ordinaryapply .choose-price-box .ac {
  border: 1px solid #2C5586;
  color: #fff;
  background: #2C5586;
  border-radius: 10px;
  /*background: url(../../../static/images/selecticon.png) no-repeat right bottom;*/
  background-size: 30px 30px;
}
/*#ordinaryapply  .centspan{*/
/*position: relative;*/
/*bottom:0px;*/
/*right: -85%;*/
/*}*/
#ordinaryapply .pricep {
  padding: 20px 40px;
}

#ordinaryapply .payment {
  display: flex;
  /*background: #f2f3f3;*/
  position: relative;
  width: 420px;
  padding-left: 40px;

}
#ordinaryapply .payment button {
  width:80px;
  height:40px;
  background:rgba(44,85,134,1);
  border-radius:10px;
  right: 0;
  top: 15px;
  height: 40px;
  line-height: 40px;
  padding: 0 0px;
  background-color: #2c5586;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  margin-left: 106px;
}
#ordinaryapply .priceinput {
  margin: 10px 40px;
  width:500px;
  text-align: right;
}
#ordinaryapply .priceinput .givespan {
  font-size: 16px;
}
#ordinaryapply .priceitem input {
  width: 100%;
  text-align: center;
  border: 0;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  border-radius: 8px;
	box-sizing: border-box;
}
#ordinaryapply .tip_red {
  color:#FF6565;
  font-size: 16px;
  margin: 20px 40px;
}
#ordinaryapply .templateInfo {
  padding: 20px 40px 0;
}
#ordinaryapply .templateInfo span + span {
  margin-left: 40px;
}
#ordinaryapply .state {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
}
#ordinaryapply .el-input--suffix .el-input__inner{
  height: 42px;
}
#ordinaryapply .div-send-box{
  width: 420px;
  margin: 0px 40px;
}
#ordinaryapply .liter-box{
  border-radius: 8px;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}
#ordinaryapply .onActive{

}
#ordinaryapply .same-lists{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  box-sizing: border-box;
}
#ordinaryapply .lists-name{
  font-size: 14px;
  padding-right: 20px;
}
#ordinaryapply .lists-input{
  width: 45%;
}

#ordinaryapply .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close{
  color: #2C5586;
}
#ordinaryapply .el-checkbox.is-bordered.is-checked{
  border-color:#2C5586;
}
#ordinaryapply .el-checkbox__input.is-checked+.el-checkbox__label{
   color:#2C5586;
}
#ordinaryapply .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: #2C5586;
  border-color: #2C5586;
}
#ordinaryapply .el-checkbox__inner:hover{
  border-color:#2C5586;
}
</style>
